<style lang="scss" scoped>
  @import '@/assets/css/variable';
  .caseList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: $padding-lg;
    
    .card{
      width: 100%;
      display: flex;
      padding: $padding-lg;
      // border-radius: $border-radius-lg;
      overflow: hidden;
      background-color: white;
      margin-top: 0.8rem;
      // &:last-child{
      //   margin-bottom: 0;
      // }
      .img-box{
        display: flex;
        align-items: center;
        width:33%;
        height: 70px;
        overflow: hidden;
        background-color: #c7c7c7;
        border-radius: $border-radius-lg;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .title-box{
        margin-left: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .title{
          font-size: 1.5rem;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 设置行数 */
          -webkit-box-orient:vertical;
          color: $color-subtitle;
          line-height: 1.2em;
        }
      }
    }
    .show{
        background-color: white;
        position:relative;
        .close-icon{
          position: fixed;
          width: 2.6rem;
          height: 2.6rem;
          right: 1rem;
          top: 1rem;
          border-radius: 1.3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 2;
        }
        img{
            width: 100%;
        }
        .description{
            font-size: 1.7rem;
            font-weight: bold;
            padding-top: 1.2rem;
            padding-bottom: 1.2rem;
            padding-left: 2rem;
            position:relative;
            border-bottom: 1px solid $border-c;
        }
        .introduce{
            background-color: white;
            padding-bottom: 1rem;
            padding: 1.8rem;
        }
        .fix-bottom{
            position: fixed;
            bottom: 1rem;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 3;
            box-sizing: border-box;
        }
    }
  }
</style>

<template>
  <div class="caseList">
    <div class="card" v-for="item in caseList" :key="item.id" @click="getCaseById(item.id)">
      <div class="img-box">
        <img :src="item.cover" :alt="item.title">
      </div>
      <div class="title-box">
        <div class="title">{{item.title}}</div>
        <div class="fs-12 color-s">该案例模板被关注{{item.browse_num}}次</div>
        <div class="fs-12 color-s">其中有{{item.use_num}}个商户使用过该案例模板</div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" round>
      <div class="show">
          <span class="close-icon" :style="{backgroundColor:'red'}" @click="show = false"><van-icon color="white" name="cross" /></span>
          <div class="top">
              <img :src="caseItem.cover" alt="">
          </div>
          <div class="description">{{caseItem.title}} | 案例介绍</div>
          <div class="introduce padding-lr line-height-l">
            <div v-for="item in caseItem.introduce" :key="Number(item.id)">
                <div v-if="item.type === 'text'" class="margT-l line-height-l fs-15" v-html="item.value"></div>
                <img v-if="item.type === 'img'" class="margT-l" :src="item.value"/>
            </div>
          </div>
          <div class="tabbar-height"></div>
          <div class="fix-bottom padding-lr">
            <van-button :color="$store.getters.getMasterColor" size="normal" block @click="toView(caseItem)">使用该方案</van-button>
          </div>
      </div>
    </van-popup>
  </div>
</template> 
<script>
import { Image as VanImage, Popup,Button,Toast,Icon } from 'vant';
export default {
  name: "CaseList",
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Popup.name]: Popup,
    VanImage
  },
  props: {
    caseList: Array
  },
  data() {
    return {
      show: false,
      caseItem: {}
    }
  },
  created () {
    const _this = this;
    //const caseList = _this.$store.getters.getCaseTabsList;
    
  },
  methods: {
    getCaseById(id) {
        const _this = this;
        const toast = Toast.loading({
            forbidClick: true,
            message: '加载中...',
        });
        let params = {
            id: id
        }
        _this.$request.getCaseById(params).then(res=>{
            _this.caseItem = res.data
            // this.$store.commit('setCaseItem', _this.caseItem);
            toast.clear()
            _this.show = true
        })
    },
    toView(item) {
        this.$router.push(`/case/applyActivity/${item.activity_id}?is_edit=0&case_id=${item.id}`)
    }
    // toView(id) {
    //   this.$router.push('/case/Show/' + id)
    // }
  }
};
</script>
